<template>
  <div class="box" ref="boxRef" id="box">
    <div class="left" ref="leftRef">左侧,默认width=30%,minWidth=200px</div>
    <div class="resize" ref="resizeRef"></div>
    <div class="right" ref="rightRef">
      <div class="top" ref="topRef">
        右侧,默认width=70%,minWidth=200px,头部区域,默认minHeight=50px
      </div>
      <div class="resizeY" ref="resizeYRef"></div>
      <div class="content" ref="contentRef">
        右侧,默认width=70%,minWidth=200px,内容区域,默认minHeight=50px
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftMinWidth: 200,
      rightMinWidth: 200
    }
  },
  mounted() {
    this.handleResize()
    this.handleYResize()
  },
  methods: {
    handleResize() {
      // 获取Dom节点
      let rightMinWidth = this.rightMinWidth
      let leftMinWidth = this.leftMinWidth
      const boxDom = this.$refs.boxRef,
        leftDom = this.$refs.leftRef,
        resizeDom = this.$refs.resizeRef,
        rightDom = this.$refs.rightRef
      resizeDom.onmousedown = (e) => {
        // 记录起始位置
        const startX = e.clientX
        // 左边元素起始宽度
        let preLeftDomWidth = leftDom.offsetWidth
        // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
        const containerWidth = boxDom.clientWidth - resizeDom.offsetWidth
        document.onmousemove = (e) => {
          // 鼠标当前位置
          const endX = e.clientX
          // 移动的距离 =  endX - startX
          let moveLength = endX - startX
          // 左边区域最后的宽度 = preLeftDomWidth + 移动的距离
          let currentLeftDomWidth = preLeftDomWidth + moveLength
          // 限制左边区域的最小宽度为 leftMinWidth
          if (currentLeftDomWidth < leftMinWidth) {
            currentLeftDomWidth = leftMinWidth
          }
          // ∵右边区域最小宽度为 rightMinWidth,∴左边最大宽度为 containerWidth - rightMinWidth
          let leftcontainerWidth = containerWidth - rightMinWidth
          if (currentLeftDomWidth > leftcontainerWidth) {
            currentLeftDomWidth = leftcontainerWidth
          }
          // 设置左边区域的宽度,通过换算为百分比的形式,实现窗体放大缩小自适应
          leftDom.style.width = (currentLeftDomWidth / containerWidth) * 100 + '%'
          // 右边区域 = 总大小 - 左边宽度
          rightDom.style.width =
            ((containerWidth - currentLeftDomWidth) / containerWidth) * 100 + '%'
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
          resizeDom.releaseCapture && resizeDom.releaseCapture() // 鼠标捕获释放
        }
        resizeDom.setCapture && resizeDom.setCapture() // 启用鼠标捕获
        return false
      }
    },
    handleYResize(minTopHeight = 50, minContentHeight = 50) {
      const boxDom = this.$refs.boxRef,
        topDom = this.$refs.topRef,
        resizeDom = this.$refs.resizeYRef,
        contentDom = this.$refs.contentRef
      resizeDom.onmousedown = (e) => {
        // 记录鼠标移动的起始位置
        const startY = e.clientY
        // 记录此刻topDom的高度
        let preTopDomHeight = topDom.offsetHeight
        // 除了resizeDom的高度，剩下的总高度
        const containerHeight = boxDom.clientHeight - resizeDom.offsetHeight
        document.onmousemove = (e) => {
          const endY = e.clientY
          // 移动的距离
          let moveLength = endY - startY
          let currentTopDomHeight = preTopDomHeight + moveLength
          if (currentTopDomHeight < minTopHeight) {
            currentTopDomHeight = minTopHeight
          }
          let maxTopHeight = containerHeight - minContentHeight
          if (currentTopDomHeight > maxTopHeight) {
            currentTopDomHeight = maxTopHeight
          }
          topDom.style.height = (currentTopDomHeight / containerHeight) * 100 + '%'
          contentDom.style.height =
            ((containerHeight - currentTopDomHeight) / containerHeight) * 100 + '%'
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
          resizeDom.releaseCapture && resizeDom.releaseCapture()
        }
        resizeDom.setCapture && resizeDom.setCapture()
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  height: 300px;
}
.left {
  width: 30%;
  background-color: #f1eab3;
  border: 1px solid #dcdfe6;
}
.resize {
  position: relative;
  width: 3px;
  height: 100%;
  cursor: col-resize;
  background-size: cover;
  background-position: center;
  &:hover {
    background-color: #45a3ff;
  }
}
.right {
  width: 70%;
  // background-color: #b5ef8f;
  // border: 1px solid #dcdfe6;
  overflow: hidden;
  .top {
    height: 20%;
    background-color: #b5ef8f;
    border: 1px solid #dcdfe6;
  }
  .resizeY {
    position: relative;
    height: 3px;
    cursor: row-resize;
    &:hover {
      background-color: #45a3ff;
    }
  }
  .content {
    height: 80%;
    background: #abc8ea;
    border: 1px solid #dcdfe6;
  }
}
</style>
